<script setup>
import admin01 from "../class/img/admin01.jpg"
import admin02 from "../class/img/admin02.jpg"
import element from "../class/img/element-plus-logo.svg"
import Vue3 from "../class/img/vue3-logo.png"
import vite from "../class/img/vue3-vite-logo.svg"
import Express from "../class/img/Express-logo.png"
import node from "../class/img/node-logo.png"
import sequelize from "../class/img/sequelize-logo.png"
import axios from "../class/img/axios-logo.png"
import mysql from "../class/img/mysql-logo.png"
</script>
<template>
    <div class="info" >
        <el-divider>
      博客园项目开发成员
    </el-divider>
    <el-row>
        <el-col :span="12" >
            <el-result title="DeusVoez" sub-title="何伟豪">
    <template #icon>
      <el-image
      class="avatar"
        :src="admin01"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="12" >
            <el-result title="一叶织秋" sub-title="李浩鑫">
    <template #icon>
      <el-image
      class="avatar"
        :src="admin02"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
</el-row>    
<el-divider>
    前端设计
    </el-divider>
    <el-row>
        <el-col :span="8" >
            <el-result  title="element-puls" sub-title="基于 Vue 3，面向设计师和开发者的组件库">
    <template #icon>
      <el-image
      class="icon"
        :src="element"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="8" >
            <el-result title="Vue3" sub-title="渐进式 JavaScript 框架">
    <template #icon>
      <el-image
      class="icon"
        :src="Vue3"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="8" >
            <el-result title="vite" sub-title="下一代的前端工具链,为开发提供极速响应">
    <template #icon>
      <el-image
      class="icon"
        :src="vite"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
</el-row>  
<el-divider>
      后端设计
    </el-divider>
    <el-row>
      <el-col :span="8" >
            <el-result title="node" sub-title="Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时环境，允许开发人员在浏览器之外编写命令行工具和服务器端脚本.">
    <template #icon>
      <el-image
      class="icon"
        :src="node"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="8" >
            <el-result  title="Express" sub-title="基于 Node.js 平台，快速、开放、极简的 Web 开发框架">
    <template #icon>
      <el-image
      class="icon"
        :src="Express"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="8" >
            <el-result  title="Axios" sub-title="Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js">
    <template #icon>
      <el-image
      class="icon"
        :src="axios"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="8" >
            <el-result title="sequelize" sub-title="下Sequelize 是一个基于 promise 的 Node.js ORM, 目前支持 Postgres, MySQL, MariaDB, SQLite 以及 Microsoft SQL Server. 它具有强大的事务支持, 关联关系, 预读和延迟加载,读取复制等功能。">
    <template #icon>
      <el-image
      class="icon"
        :src="sequelize"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="8" >
            <el-result title="mysql" sub-title="MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，属于 Oracle旗下产品。MySQL是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的RDBMS (Relational Database Management System，关系数据库管理系统)应用软件之一">
    <template #icon>
      <el-image
      class="icon"
        :src="mysql"
      />
    </template>
    <template #extra>
    </template>
  </el-result>
        </el-col>
        <el-col :span="8" >
        <el-space wrap>
      <el-button type="success "> Node库: </el-button>
      <el-button type="success" text> Express-router</el-button>
      <el-button type="success" text> body-parser </el-button>
      <el-button type="success" text> cors </el-button>
      <el-button type="success" text> vueX </el-button>
  </el-space>
</el-col>
</el-row>  
</div>
</template>

<style scoped>
.info{
    margin: 50px;
    padding: 20px;
    padding-top: 50px;
    background-color: white;
}
.avatar{
    width: 100px;
    border-radius: 5px;
}
.icon{
  height: 80px;
}
</style>
